Skip to content

feat(core): add anime.js runtime adapter#569

Merged
miguel-heygen merged 2 commits intomainfrom
feat/animejs-adapter
Apr 29, 2026
Merged

feat(core): add anime.js runtime adapter#569
miguel-heygen merged 2 commits intomainfrom
feat/animejs-adapter

Conversation

@miguel-heygen
Copy link
Copy Markdown
Collaborator

@miguel-heygen miguel-heygen commented Apr 29, 2026

Summary

  • Adds a RuntimeDeterministicAdapter for anime.js v4+ alongside existing Lottie, Three.js, WAAPI, and CSS adapters
  • Enables frame-accurate rendering of anime.js animations — the adapter converts seek time (seconds) to milliseconds and calls .seek(timeMs) on registered instances
  • Auto-discovers running instances via anime.running; compositions can also register manually via window.__hfAnime

Usage in compositions

<script src="https://cdn.jsdelivr.net/npm/animejs@4.0.2/lib/anime.iife.min.js"></script>
<script>
  const anim = anime({
    targets: '.box',
    translateX: 250,
    rotate: '1turn',
    duration: 2000,
    autoplay: false,
  });
  window.__hfAnime = window.__hfAnime || [];
  window.__hfAnime.push(anim);
</script>

Files changed

  • packages/core/src/runtime/adapters/animejs.ts — adapter implementation
  • packages/core/src/runtime/adapters/animejs.test.ts — 15 unit tests
  • packages/core/src/runtime/init.ts — register adapter in runtime init
  • packages/core/src/runtime/window.d.ts — add anime and __hfAnime globals

Test plan

  • All 15 unit tests pass (bun run --cwd packages/core test -- --run adapters/animejs)
  • Build passes (bun run build)
  • Pre-commit hooks pass (lint, format, typecheck, commitlint)
  • Manual test: render a composition using anime.js animations

Add a RuntimeDeterministicAdapter for anime.js v4+ that enables
seekable frame-accurate rendering of anime.js animations in
HyperFrames compositions.

The adapter:
- Auto-discovers instances from `anime.running`
- Accepts manual registration via `window.__hfAnime`
- Converts seek time (seconds) to milliseconds for anime.js `.seek()`
- Handles multiple instances, gracefully skips failures

Follows the same pattern as the existing Lottie, Three.js, WAAPI,
and CSS adapters.
Exercises the anime.js v4 runtime adapter with a 6-second composition
that covers:
- createTimeline() with seek()
- stagger() with grid patterns (center + edges)
- Multiple overlapping timelines dispatched via __hfAnime
- CSS transform animations (rotate, skew, scale, translate)

Baseline generated inside Dockerfile.test on the devbox.
100/100 visual checkpoints pass with psnr threshold 30.
@miguel-heygen miguel-heygen merged commit f9d38a1 into main Apr 29, 2026
41 checks passed
@miguel-heygen miguel-heygen deleted the feat/animejs-adapter branch April 29, 2026 19:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants